<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta content="telephone=no" name="format-detection" />
        <title>加入房间</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/wechat/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/common/common.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.min.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.ext.js"></script>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style type="text/css">
            *{margin: 0;padding: 0;border: 0}
			body{font-size: 32px;font-size: .32rem;width: 7.5rem;max-width: 1080px;margin: 0 auto;background: #f6f6f6;font-family: 'STHeiti', 'Microsoft YaHei', Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
			a, a:active, a:hover, a:focus, a:visited{text-decoration: none}
			a, img{-webkit-touch-callout: none}
			ol, ul, li{list-style: none}
			.clearfix:after{display: block;clear: both;content: "";visibility: hidden;height: 0}
			.header-img{width: 100%;}
			.room-wrapper{padding: .1rem .2rem;}
			.room-wrapper h2{font-size: 0.4rem;font-weight: normal;}
			.room-wrapper li{float: left;width: 23%;margin: .2rem 1% .4rem;position: relative}
			.room-wrapper li .member{padding-top: 100%;background-image: url(${pageContext.request.contextPath}/images/crowd/wait-join.png);background-repeat: no-repeat;background-position: center center;background-size: 100% 100%;-webkit-background-size: 100% 100%;}
			.room-wrapper li .member-name{position: absolute;left: 0;bottom: -0.5rem;width: 100%;text-align: center}
			.join-btn{display: block;width: 100%;height: 1rem;line-height: 1rem;border-radius: 0.5rem;background: #64ba25;text-align: center;font-size: .5rem;color: #ffffff}
			.download-btn{display: block;margin-top: 0.5rem;width: 100%;height: .7rem;line-height: .7rem;border-radius: 0.35rem;background: #1fb4ec;text-align: center;font-size: .3rem;color: #ffffff}
        	.room-tip{ position: fixed;  color:white; top:140px; bottom:0;  filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
        	
        	 .top-wrapper {
        		padding: .1rem .2rem;
        	 	width: 98%;
                height: 90%;
                position: absolute;
                top: 2rem;
                text-align: center;
                top:270px;
            }

            .top-wrapper .logo {
                width: 5rem;
                height: 5rem;
                margin: 0 auto;
                /** background: #46589a; **/
                border-radius: 5px;
            }
           .weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
		   .weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
		
        </style>
    </head>

    <body>
        <script type="text/javascript">
            var Dpr = 1,
                uAgent = window.navigator.userAgent;
            var isIOS = uAgent.match(/iphone/i);

            function resizeRoot() {
                var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width :
                    window.innerWidth : window.innerWidth,
                    wDpr, wFsize;
                var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ?
                    screen.height : window.innerHeight : window.innerHeight;
                if (window.devicePixelRatio) {
                    wDpr = window.devicePixelRatio;
                } else {
                    wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;
                }
                if (isIOS) {
                    wWidth = screen.width;
                    wHeight = screen.height;
                }

                if (wWidth > wHeight) {
                    wWidth = wHeight;
                }
                wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
                wFsize = wFsize > 32 ? wFsize : 32;
                window.screenWidth_ = wWidth;

                // document.getElementsByTagName('html')[0].dataset.dpr = wDpr;
                document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
                // alert("fz="+wFsize+";dpr="+window.devicePixelRatio+";UA="+uAgent+";width="+wWidth+";sw="+screen.width+";wiw="+window.innerWidth+";wsw="+window.screen.width+window.screen.availWidth);
            }
            resizeRoot();
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            window.addEventListener(resizeEvt, resizeRoot, false);
            
        </script>
        
        <!-- 隐藏图 -->
		<div class="weixin-tip" onclick="hide()">
				<p>
					<img class="imghedden" src="${pageContext.request.contextPath}/images/youle/live_weixin.png" alt="微信打开">
				</p>
		</div>
        
        <c:if test="${playerCount==0}">
	        <div class="top-wrapper">
	            <div class="basic-info">
	                <fieldset>
	                    <div class="info-txt" style="font-size: 20px">您来晚了，位置被人抢走勒!</div>
	                    <div class="info-txt"><a  href=""><strong>（新用户我前往下载）</strong></a></div>
	                </fieldset>
	            </div>
	        </div>
        </c:if>
        
        <c:if test="${playerCount!=0}">
        
        <div class="room-tip" style="text-align: center;">
			<p>
				房间号：${playerInRoomInfo.roomNumber}
			</p>
			<p>
				${gameName}- ${playerInRoomInfo.maxCount}局
			</p>
		</div>
        
        <img class="header-img" src="${pageContext.request.contextPath}/images/crowd/01.jpg"  />
        <div class="room-wrapper">
            <h2>房间成员</h2>
            <ul class="member-list clearfix">
                
                
                <c:if test="${playerCount==0}">
                
                </c:if>
                
                <c:forEach items="${playerInRoomInfoList}" var="playerInRoomInfo">
	                <li>
	                    <div class="member owner" style="background-image: url(${playerInRoomInfo.nickHead})"></div>
	                    <div class="member-name">${playerInRoomInfo.nickName}</div>
	                </li>
                </c:forEach> 
                <c:if test="${playerCount==1}">
                	<li>
                   		 <div class="member"></div>
               		</li>
                </c:if>
                
               <c:if test="${playerCount==2}">
                	<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
                </c:if>
                <c:if test="${playerCount==3}">
                	<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
                </c:if>
                <c:if test="${playerCount==4}">
                	<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
                </c:if>
                <c:if test="${playerCount==5}">
                	<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
               		<li>
                   		 <div class="member"></div>
               		</li>
                </c:if>
                
            </ul>
            <br>
            <a href="javascript:;" class="join-btn">加入房间</a>
            <a href="javascript:downloads(this,'1');" onclick="downloads(this,'1');" class="download-btn">下载游戏</a>
        </div>
        </c:if>
        
        <script type="text/javascript">
	        var winHeight = $(window).height();
	    	var weixin = false;
	        var isIos = false;
	        function downloads(me,status){
	        	alert(1);
	    	    var winHeight = $(window).height();
	    		var isWeixin = is_weixin();
	    		if(isWeixin){
	    			$(".weixin-tip").css("height",winHeight);
	    	        $(".weixin-tip").show();
	    	        return;
	    		}
	    	    var iosUrl = "itms-services://?action=download-manifest&url=https://czhy.youlehuyu.cn/app/ios.plist";
	    		var Url2 = "/../app/xianleqipai.apk ";
	            var url = isIos? iosUrl : Url2;
	            window.location.href = url;
	        }
	        
	        function is_weixin() {
	    	    var ua = navigator.userAgent.toLowerCase();
	    	    if (ua.match(/MicroMessenger/i) == "micromessenger") {
	    	        return true;
	    	    } else {
	    	        return false;
	    	    }
	    	}
	        
	        function hide(){
	        	$(".weixin-tip").hide();
	        }
        	
        
        </script>
        
    </body>

</html>
